<template>
  <view>
    <!-- <button @click="getAllPics">test</button> -->
    <view class="waterfall-container">
      <view
        class="waterfall-item"
        v-for="it in imgs"
        :key="it.pic_id"
        :data-picdetail="it"
        @click="onPictureDetail"
      >
        <image :src="it.pic_display" mode="widthFix"></image>
        <view class="img-discription">{{
          it.phone.replace(/(\d{2})\d*(\d{2})/g, "$1******$2")
        }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 增加成员变量, 记录请求的时间
      // 在拉到底部时, 再次发出请求, 数据中包含上次请求的时间
      imgs: [
        // {
        //   pic_id: "54234645624565",
        //   phone: "5657586798754322345",
        //   pic_display: "/static/temp_pics/pic1.jpeg",
        // },
      ],
      img_discription: "测试图片",
    };
  },
  onLoad: function () {
    uni.showLoading({ title: "动态加载中" });
    this.getAllPics();
  },
  methods: {
    getAllPics: function () {
      let postData = {
        option: "refresh",
      };
      this.$http
        .post(this.urlApi.share, postData)
        .then((res) => {
          let ids = res.data;
          console.log(ids);
          this.imgs = [];
          for (let i = 0; i < ids.length; i++) {
            this.getPicOneByOne(ids[i].pic_id, ids[i].pic_user);
          }
          uni.hideLoading();
        })
        .catch((err) => {
          console.log(err);
          uni.showToast({ title: "动态请求失败", icon: "error" });
        });
    },
    getPicOneByOne: function (pic_id, phone) {
      let postData = {
        option: "download",
        pic_id: pic_id,
      };
      this.$http
        .download(this.urlApi.pic, { params: postData })
        .then((res) => {
          let img = {
            pic_id: pic_id,
            phone: phone,
            pic_display: res.tempFilePath,
          };
          this.imgs.push(img);
        })
        .catch((err) => {
          console.log(err);
          uni.showToast({ title: "图片获取失败", icon: "error" });
        });
    },
    onPictureDetail: function (e) {
      console.log("show detail", e.target);
      uni.navigateTo({
        url:
          "/pages/details/picDetail" +
          "?picid=" +
          encodeURIComponent(JSON.stringify(e.currentTarget.dataset.picdetail)),
        success: () => {
          console.log("successfully navigated!");
        },
        fail: (err) => {
          console.log("failed to navigate", err);
        },
      });
    },
  },
};
</script>

<style>
.waterfall-container {
  padding: 20upx;
  column-count: 2;
  column-gap: 20upx;
}
.waterfall-item {
  box-shadow: 0 0 10upx lightgray;
  /* border-radius: 10upx; */
  break-inside: avoid;
  margin: 0 0 20upx 0;
  cursor: pointer;
}
.img-discription {
  font-size: 25upx;
  padding: 0 10upx 10upx 10upx;
}
uni-image {
  display: inline-block;
  /* border-radius: 10upx; */
  /* box-shadow: 0 0 5upx grey; */
  width: 100%;
  /* vertical-align: middle; */
}
uni-image > img uni-image-div {
  object-fit: contain;
}
</style>